<template>
    <div class="window-wrap">
        <div class="window-content" :style="'width:'+width">
            <img class="left" src="@/assets/window/BK_Z.png" alt="" />
            <img class="center" src="@/assets/window/BK.png" alt="" />
            <img class="right" src="@/assets/window/BK_Y.png" alt="" />
            <div class="close" @click="close">
                <img src="@/assets/window/GB.png" alt="" />
            </div>
            <div class="title">
                {{title}}
            </div>
            <div class="table" v-if="data.length != 0" ref="table">
                <div class="box">
                    <div class="flex" v-for="(item,index) in titleArray" :key="index">{{item.label}}</div>
                </div>
                <div class="box" v-for="(item, index) in data" :key="index">
                    <div class="flex" v-for="(titleItem, index) in titleArray" :key="index">{{item[titleItem.value]}}</div>
                </div>
            </div>
            <div class="emptyData" v-if="data.length == 0">
                暂无数据
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:{
      title:{
          type:String
      },
      titleArray:{
          type:Array
      },
      data:{
          type:Array
      },
      width:{
          default:'60%'
      }
    },
    data(){
        return{
            tableArray: this.data,
            loading: false
        }
    },
    mounted(){
        this.$refs.table.addEventListener('scroll', this.menu,true)
    },
    methods:{
        menu() {
            const table = this.$refs.table
            if (table) {
                const offsetHeight = table.offsetHeight;
                const scrollTop = table.scrollTop;
                const scrollHeight = table.scrollHeight;
                if ((offsetHeight + scrollTop + 300) >= scrollHeight && !this.loading) {
                    this.loading = true
                    this.$emit('windowScroll', scroll)
                }
            }
        },
        close(){
            this.$emit('windowClose')
        }
    },
    watch:{
        data:function(nVal,oVal){
            this.loading = false
            // this.tableArray = this.tableArray.concat(nVal)
        }
    }
}
</script>
<style scoped lang="scss">
.window-wrap{
    position: fixed;
    top:0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.6);
    width: 100%;
    height: 100%;
    z-index: 9999999999;
}
.emptyData{
    position: relative;
    z-index: 2;
    padding: 2vw;
    text-align: center;
    color: #fff;
}
.window-content{
    position: relative;
    box-sizing: border-box;
    padding: .8vw;
    .left,.center,.right{
        position: absolute;
        top:0;
        width: 15%;
        height: 100%;
    }
    .left{
        left:0;
    }
    .right{
        right: 0;
    }
    .center{
        top:1%;
        height: 98%;
        width: 71%;
        left: 15%;
    }
    .close{
        position: absolute;
        z-index: 999999;
        top:.8vw;
        right: .6vw;
        width: 2.6vw;
        height: 1.2vw;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url('../../assets/window/GB_D.png') no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
        img{
            width: 20%;
        }
    }
    .title{
        position: absolute;
        top:-.4vw;
        left: 50%;
        transform: translate(-50%,0);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2vw;
        min-width: 6vw;
        box-sizing: border-box;
        padding: .2vw 1.6vw;
        color: #A6F4FF;
        background: url('../../assets/window/BT_D.png') no-repeat;
        background-size: 100% 100%;
    }
    p{
        color: #fff;
    }

}
.table{
    position: relative;
    z-index: 2;
    margin: 2vw .4vw .4vw .4vw;
    border: 1px solid rgba(55,159,213,0.4);
    max-height: 35vw;
    overflow-y: scroll;
    .box{
        display: flex;
    }
    .flex{
        flex: 1;
        text-align: center;
        color: #74F0FF;
        font-size: .9vw;
        padding: .6vw 0;
        border-left: 1px solid rgba(55,159,213,0.4);
    }
    .flex:last-child{
    }
    .box:first-child{
        background:rgba(9,43,84,0.5);
        .flex{
            color: #fff;
            font-size: 1vw;
            padding: .6vw;
            border-bottom: 1px solid rgba(55,159,213,0.4);
        }
        .flex:last-child{
            // border-right: 1px solid rgba(55,159,213,0.4);
        }
    }

}
::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性
    background-color:rgba(255,255,255,.4);
}
::-webkit-scrollbar {//滚动条的宽度
    width:4px;
    height:4px;
}
::-webkit-scrollbar-thumb {//滚动条的设置
    background-color:rgba(55,159,213,0.8);
    background-clip:padding-box;
    min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
    background-color:#bbb;
}
</style>
